<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --device-width: 770px;
        --device-height: 1336px;
        --ui-width: 640px;
        font-size: 15px;
      }
      #iphone {
        position: relative;
        width: var(--device-width);
        height: var(--device-height);
      }
      #hardware {
        width: 100%;
        height: 100%;
        border: 1px solid #fff;
      }
      body {
        background-color: #000;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 4rem 0;
      }
      h2 {
        color: grey;
        text-align: center;
        font-size: 4.5rem;
        font-weight: 600;
        margin: 6rem 0;
        height: 2800px;
        background-color: red;
      }
      h2 p {
        margin: 0;
        color: #fff;
      }
      #ui {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      #ui ul {
        list-style: none;
        margin: 0;
        padding: 0;
        --progress: 0;
      }
      #ui ul li img {
        display: block;
        width: var(--ui-width);
        height: 123px;
        margin: 10px auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #222;
        /* transform: scale(calc(1.8 - (0.8 * var(--progress))))
          translateY(calc(-60px * (1-var(--progress)))); */

        transform: scale(calc(1.8 - (0.8 * var(--progress))));
        /* transform: translateY(calc(-60px * (1- var(--progress)))); */

        opacity: var(--progress);
      }
    </style>
  </head>
  <body>
    <h2>
      Superfast wireless
      <p>Hello 5G.</p>
    </h2>
    <div id="iphone">
      <div id="hardware"></div>
      <div id="ui">
        <ul>
            <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li>
              <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li>
              <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li>
              <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li>
              <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li>
              <li>
                <img src="./WechatIMG15.jpeg" alt="" />
              </li> 
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
          <li>
            <img src="./WechatIMG15.jpeg" alt="" />
          </li>
        </ul>
      </div>
    </div>

    <script>
      const rows = document.querySelectorAll("#ui ul li");
      const html = document.documentElement;
      document.addEventListener("scroll", (e) => {
        let scrolled =
          (html.scrollTop - 2800 + 856+1300) /
          (html.scrollHeight - html.clientHeight);
        console.log(html.scrollTop);
        console.log(html.clientHeight);
        //把每一个li获取出来
        //要计算每一个li在0-1之间的所属区间

        let total = 1 / rows.length;
        // console.log("total", total);
        // let index = 0;
        // let row = rows[0];
        // let start = total * index,
        //   end = total * (index + 1);
        // console.log("start", start);
        // console.log("end", end);
        // let process = (scrolled - start) / (end - start);
        // console.log("pro", process);

        // if (process >= 1) {
        //   process = 1;
        // }
        // if (process < 0) {
        //   process = 0;
        // }
        // row.style.setProperty("--progress", process);
        for (let [index, row] of rows.entries()) {
          let start = total * index,
            end = total * (index + 1);
          console.log('start', start);
          //  console.log(`row${index}:${start}-${end}`);
          let process = (scrolled - start) / (end - start);
          if (process >= 1) {
            process = 1;
          }
          if (process < 0) {
            process = 0;
          }

          row.style.setProperty("--progress", process);
        }
      });
    </script>
  </body>
</html>
